<template>
    <div ref="MapView" class="MapView">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            --------------------------------------------------------------<br>
            显示隐藏： <i-switch v-model="show"></i-switch>
            <!-- <br><br> -->
            <!-- 
            <br>
            航向角： <Slider v-model="heading" :min="0" :max="360"></Slider>
            俯仰角：<Slider v-model="pitch" :min="-90" :max="90"></Slider>
            翻滚角：<Slider v-model="roll" :min="0" :max="360"></Slider>
            -------------------------------------------------- -->
            <br><br>
            面颜色：
            <ColorPicker v-model="Color" alpha />&nbsp;<br><br>
            高度({{height}}米)：<Slider v-model="height" :min="0" :max="2000000"></Slider>
            半径({{radius}}米)：<Slider v-model="radius" :min="0" :max="2000000"></Slider>

            分割线开关： <i-switch v-model="showLine"></i-switch><br><br>

            <div v-if="showLine">
                线颜色：
                <ColorPicker v-model="lineColor" alpha />&nbsp;<br><br>
                <div v-if="this.height">
                    高度间隔({{heightInterval}}米)：<Slider v-model="heightInterval" :min="0" :max="height"></Slider>
                </div>
                角度间隔({{radiusInterval}}度)：<Slider v-model="radiusInterval" :min="0" :max="360"></Slider>
                <br>
            </div>

            扫描面开关： <i-switch v-model="showScanPlane"></i-switch><br><br>

            <div v-if="showScanPlane">
                扫描面动画： <i-switch v-model="ScanPlaneSwitch"></i-switch><br><br>

                扫描面颜色：
                <ColorPicker v-model="ScanPlaneColor" alpha />&nbsp;<br><br>
                <div v-if="ScanPlaneSwitch">
                    扫描面速度({{ScanPlaneSpeed}}秒)：<Slider v-model="ScanPlaneSpeed" :min="0" :max="10"></Slider>
                </div>
            </div>
            <br>
        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap'
var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

var position = Cesium.Cartesian3.fromDegrees(119, 40, 0);
var _Entity = null;

export default {
    data() {
        return {
            SenceMode: '3D',
            heading: 0,
            pitch: 0,
            roll: 0,
            height: 200000,
            radius: 100000,
            show: true,
            Color: 'rgba(100,0,255,0.4)',
            showLine: true,
            lineColor: 'rgba(34,12,68,0.7)',
            ScanPlaneColor: 'rgba(8,14,186,0.4)',
            heightInterval: 50000,
            radiusInterval: 30,
            showScanPlane: false,
            ScanPlaneSwitch: false,
            ScanPlaneSpeed: 10,
        }
    },
    watch: {
        SenceMode(value) { map.SenceMode = value; },
        heading() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(position, r);
        },
        pitch() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(position, r);
        },
        roll() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            _Entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(position, r);
        },
        height(value) {
            _Entity.highPower.height = value;
            if (this.heightInterval > value) {
                this.heightInterval = value
            }
        },
        radius(value) {
            _Entity.highPower.radius = value
        },
        show(value) {
            _Entity.highPower.show = value
        },
        heightInterval(value) {
            _Entity.highPower.heightInterval = value
        },
        radiusInterval(value) {
            _Entity.highPower.radiusInterval = value
        },
        Color(value) {
            _Entity.highPower.color = this.rgba2Color(value);
        },
        showLine(value) {
            _Entity.highPower.showLine = value;
        },
        lineColor(value) {
            _Entity.highPower.lineColor = this.rgba2Color(value);
        },
        showScanPlane(value) {
            _Entity.highPower.showScanPlane = value
        },
        ScanPlaneColor(value) {
            _Entity.highPower.ScanPlaneColor = this.rgba2Color(value);
        },
        ScanPlaneSwitch(value) {
            _Entity.highPower.ScanPlaneSwitch = value
        },
        ScanPlaneSpeed(value) {
            _Entity.highPower.ScanPlaneSpeed = value
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, { mapOptions: { senceMode: this.SenceMode } });
        map.addProviders(mapConfig);
        map.flytochina();
        var viewer = map.getViewer();
        _Entity = viewer.entities.add({
            position: position,
            point: {
                show: true, //是否展示
                pixelSize: 4, //点的大小
                color: Cesium.Color.YELLOW, //颜色
                outline: true,
                outlineWidth: 1,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            highPower: new Cesium.HighPowerGraphics({
                height: this.height,
                radius: this.radius,
                heightInterval: this.heightInterval,
                radiusInterval: this.radiusInterval,
                color: this.rgba2Color(this.Color),
                lineColor: this.rgba2Color(this.lineColor),
                ScanPlaneColor: this.rgba2Color(this.ScanPlaneColor),
            }),
        });

    },
    methods: {
        rgba2Color(value) {
            const regex = /(?<=\().+?(?=\))/g; // [] 中括号    
            var _value = value.match(regex)[0].split(',');
            return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
        },
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.MapView {
    width: 100%;
    height: 100%;
}

.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>